<template>
	<view class="login">
		<view class="welcome">欢迎回来！</view>
		<u-input class="userId" v-model="username" type="text" :border="true" placeholder="请输入账号" />
		<u-input class="userPwd" v-model="password" type="password" :border="true" :password-icon="true" placeholder="请输入密码" />
		<view class="button" @click="login()">登录</view>
		<text class="forget ">忘记密码</text>
		<view class="bottom">
			还没账号？
			<text style="color: blue;" @click="toRegister">马上注册</text>
		</view>
	</view>
</template>

<script>
import { loginApi } from '@/api/user';
export default {
	data() {
		return {
			password: '123456',
			username:'admin',
			type: 'text'
		};
	},
	methods: {
		//跳转注册页面
		toRegister() {
			uni.navigateTo({
				url: '../register/register'
			});
		},
		//登录
		login(){
			loginApi({
				username: this.username,
				password: this.password
			}).then(res => {
 				uni.setStorageSync('token',res.msg)
				this.$router.push('/')
			});
		}
	},
	created() {
		
	}
};
</script>

<style lang="less" scoped>
.login {
	.welcome {
		position: absolute;
		top: 10%;
		left: 30px;
		font-size: 20px;
		color: #475255;
	}
	.forget {
		color: blue;
		font-size: 12px;
		text-align: center;
		position: absolute;
		top: calc(55% + 50px);
		width: 100%;
	}
	.bottom {
		position: absolute;
		width: 100%;
		bottom: 5%;
		text-align: center;
		font-size: 12px;
	}
	.button {
		width: 80%;
		position: absolute;
		top: 55%;
		height: 40px;
		border-radius: 20px;
		background-color: red;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		margin-left: 10%;
	}
	.input {
		position: absolute;
		width: 90%;
		margin-left: 5%;
	}
	.userId {
		.input();
		top: 30%;
	}
	.userPwd {
		top: 40%;
		.input();
	}
}
</style>
